<template>
  <div>
    <NavBar />
    <div class="page-container">
      <h1>正文页{{ articleId }}</h1>
      <p>Article1和Article2共用本组件。</p>
      <p v-if="articleId == '1'">
        1. 测试保持滚动位置：Article1 ->
        Article2，再依次回退，可以看到滚动位置全部保持。注意先任意滚动页面再点击按钮。<br />
        <button @click="$router.push({ name: 'Article', query: { id: 2 }, params: { keepScrollY: true } })">
          去Article2页
        </button>
      </p>
      <p v-if="articleId == '1'">
        2. 测试不保持滚动位置：Article1 ->
        Article2，再依次回退，可以看到滚动位置全部没有保持。注意先任意滚动页面再点击按钮。<br />
        <button @click="$router.push({ name: 'Article', query: { id: 2 } })">去Article2页</button>
      </p>
      <div v-html="content"></div>
      <div v-html="content"></div>
      <div v-html="content"></div>
      <div v-html="content"></div>
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script>
import NavBar from '@/components/NavBar.vue';
export default {
  name: 'Article',
  components: {
    NavBar,
  },
  data() {
    return {
      show: false,
      articleId: null,
      content: '',
    };
  },
  created() {
    this.articleId = this.$route.query.id.toString();
    setTimeout(() => {
      if (this.articleId == '1') {
        this.content = '<p>第一首：咏鹅</p><p>鹅鹅鹅，曲项向天歌。</p><p>白毛浮绿水，红掌拨清波。</p>';
      } else if (this.articleId == '2') {
        this.content =
          '<p>第二首：昨夜星辰昨夜风</p><p>昨夜星辰昨夜风，画楼西畔桂堂东。</p><p>身无彩凤双飞翼，心有灵犀一点通。</p>';
      }
    }, 500);
  },
};
</script>
